.sidebar {
  color: $theme-white;
  background: $theme-menu-background;

  a {
    text-decoration: none;
  }

  li {
    list-style: none;
  }
  .version {
    color: rgba(255, 255, 255, 0.3);
  }
}

.toctree {
  a {
    color: $theme-white;
    padding: 0.5em;
  }

  .caption {
    color: lighten($theme-blue, 15%);
    font-weight: $font-weight-bold;
    line-height: 32px;
  }

  .fa {
    margin-right: 2px;
  }

  > ul {
    // the first level links
    > .toc > a {
      padding-left: $spacer-4 / 2;
    }

    // the first level links not current
    > .toc:not(.current) > a {
      &:hover {
        background: $theme-mask-white;
      }
      &:active {
        background: $theme-menu-active-background;
      }
    }

    .toc.current {
      // all expanded links
      a {
        color: #404040;

        &:hover {
          background: $theme-mask-white;
        }
        &.current {
          font-weight: bold;
          background: $theme-white;
          border-top: 1px solid var(--toc-2);
          border-bottom: 1px solid var(--toc-2);
        }
      }
      // parent links
      > a {
        .fa-plus-square-o {
          @extend .fa-minus-square-o;
        }
      }
    }
    // fixed level-1's hover mask
    > .toc.current {
      background: var(--toc-1);
    }
  }
}

// toc layout
.toc {
  > ul {
    @extend .d-none;
  }
  @for $level from 1 through 11 {
    &.level-#{$level}.current {
      > a {
        padding-left: $spacer-4 * ($level - 1 + 0.5);
        background: var(--toc-#{$level});
      }

      > ul {
        @extend .d-block;
        background: var(--toc-#{$level + 1});
      }

      .level-#{$level + 1} > a {
        padding-left: $spacer-4 * ($level + 0.5);
      }
    }
  }
}
